import React from 'react';

import { InboxOutlined, UploadOutlined } from '@ant-design/icons';
import {
  Button,
  Checkbox,
  Col,
  ColorPicker,
  Form,
  InputNumber,
  Radio,
  Rate,
  Row,
  Select,
  Slider,
  Space,
  Switch,
  Upload,
   Input
} from 'antd';

const { Option } = Select;

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

const normFile = (e: any) => {
  console.log('Upload event:', e);
  if (Array.isArray(e)) {
    return e;
  }
  return e?.fileList;
};

const onFinish = (values: any) => {
  console.log('Received values of form: ', values);
};

const App: React.FC = () => (
  <Form
    name="validate_other"
    {...formItemLayout}
    onFinish={onFinish}
    initialValues={{
      'input-number': 3,
      'checkbox-group': ['A', 'B'],
      rate: 3.5,
      'color-picker': null,
    }}
    style={{ maxWidth: 600 }}
  >
  <Form.Item name="goal" label="分析目标" rules={[{ required: true }]}>
        <Input />
      </Form.Item>

      <Form.Item name="names" label="图表名称"  rules={[{ required: true, message: '图表名称是必填项' }]} >
        <Input />
      </Form.Item>





      <Form.Item
      name="chartType"
      label="图表类型"
      hasFeedback
      
    >
      <Select placeholder="请选择图表类型">
        <Option value="柱状图">柱状图</Option>
        <Option value="雷达图">雷达图</Option>
        <Option value="折线图">折线图</Option>
        <Option value="饼图">饼图</Option>
      </Select>
    </Form.Item>

   
    


    <Form.Item
      name="file"
      label="文件上传"
      valuePropName="fileList"
      getValueFromEvent={normFile}
      extra=""
    >
      <Upload name="logo" action="/upload.do" listType="picture">
        <Button icon={<UploadOutlined />}>请上传excel文件</Button>
      </Upload>
    </Form.Item>
   
   
    <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
      <Space>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
        <Button htmlType="reset">reset</Button>
      </Space>
    </Form.Item>
  </Form>
);

export default App;